{
  "properties" : { },
  "id" : "3a6944e84d07436f939602d7b12185a1",
  "script" : null,
  "groupId" : "ea55584b076149d0b62e309b156a9202",
  "name" : "user.html",
  "createTime" : null,
  "updateTime" : 1736693914437,
  "lock" : null,
  "createBy" : null,
  "updateBy" : "可辉",
  "path" : "user.html"
}
================================
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户信息</title>
    <link rel="stylesheet" href="/plugs/layui/css/layui.css" />
    <style>
      html, body { height: 100% }
      .layui-table .layui-form-select .layui-input{ height: 28px }
    </style>
</head>
<body class="layui-padding-2">


  <div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
  <div class="layui-form layui-padding-2">
      <div class="layui-inline">
        <label class="layui-form-label">单位：</label>
        <div class="layui-input-inline">
          <select lay-search="" lay-filter="unit-select-filter">
            <#list units as unit>
            <option value="${unit.value}">${unit.label}</option>
            </#list>
          </select>
      </div>
  </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <table class="layui-hide" id="ID-defTable"></table>
  
  
  <script type="text/html" id="TPL-select-nonLock">
    <select name="nonLock" lay-filter="select-nonLock" userId="{{= d.userId }}" lay-append-to="body">
      {{#  layui.each(["锁定","未锁定"], function(i, v){ }}
      <option value="{{= i }}" {{= i === d.nonLock ? 'selected' : '' }} >{{= v }}</option>
      {{#  }); }}
    </select>
  </script>
  <script type="text/html" id="TPL-select-nonExpired">
    <select name="nonExpired" lay-filter="select-nonExpired" userId="{{= d.userId }}" lay-append-to="body">
      {{#  layui.each(["过期","未过期"], function(i, v){ }}
      <option value="{{= i }}" {{= i === d.nonExpired ? 'selected' : '' }} >{{= v }}</option>
      {{#  }); }}
    </select>
  </script>
  <script type="text/html" id="TPL-select-isEnabled">
    <select name="isEnabled" lay-filter="select-isEnabled" userId="{{= d.userId }}" lay-append-to="body">
      {{#  layui.each(["停用","启用"], function(i, v){ }}
      <option value="{{= i }}" {{= i === d.isEnabled ? 'selected' : '' }} >{{= v }}</option>
      {{#  }); }}
    </select>
  </script>
  
  <script type="text/html" id="TPL-select-roles">
    <select name="roles" lay-filter="select-role" userId="{{= d.userId }}" lay-append-to="body">
      {{#  layui.each(roles, function(i, v){  }}
      <option value="{{= v.value }}" {{= v.label === d.roleName ? 'selected' : '' }} >{{= v.label }}</option>
      {{#  }); }}
    </select>
  </script>
  <script type="text/html" id="TPL-select-units">
    <select name="units" lay-filter="select-unit" userId="{{= d.userId }}" lay-append-to="body">
      {{#  layui.each(units, function(i, v){  }}
      <option value="{{= v.value }}" {{= v.value === parseInt(dqUnitId) ? 'selected' : '' }} >{{= v.label }}</option>
      {{#  }); }}
    </select>
  </script>
  <script type="text/html" id="TPL-defTable-toolbar">
    <div class="layui-form layui-row layui-col-space16 layui-col-md16">
      <div class="layui-col-md3">
        <button class="layui-btn layui-btn-sm" lay-event="addRow">添加用户</button>
      </div>
    </div>
  </script>
  <script type="text/html" id="TPL-defTable-tools">
    <div class="layui-btn-container">
      <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-orange" lay-event="updatePwd">变更密码</a>
      <a class="layui-btn layui-btn-xs" lay-event="removeRow">删除</a>
    </div>
  </script>

  <script src="/plugs/layui/layui.js"></script>
  <script type="text/javascript">
    window.dqUnitId = 1;
    window.roles = [
      <#list roles as role> {"label":'${role.label}',"value":${role.value}},</#list>
    ];
    window.units = [
      <#list units as unit> {"label":'${unit.label}',"value":${unit.value}},</#list>
    ];

    layui.use(function(){
      var table = layui.table;
      var layer = layui.layer;
      var form = layui.form;
      var $ = layui.jquery;

      var defTable;
      var defTableId = 'ID-defTable';

      // table 事件 - 初始化
      defTable = table.render({
          elem: '#'+defTableId,
          url: '/api/system/user/list',
          toolbar: '#TPL-defTable-toolbar',
          response: {statusCode: 200, dataName: 'data'}, page: true,
          cols: [[
            {type: 'checkbox', templet: '#TPL-defTable-checkbox'},
            {field: 'userId', title: 'id', hide: false, width: 110},
            {field: 'username', title: '登录账户', width: 170},
            {field: 'name', title: '姓名', edit: 'text', width: 170},
            {field: 'memo', title: '注释', edit: 'text'},
            {field: 'nonLock', title: '锁定', width: 120, templet: '#TPL-select-nonLock'},
            {field: 'nonExpired', title: '过期', width: 120, templet: '#TPL-select-nonExpired'},
            {field: 'isEnabled', title: '启用', width: 120, templet: '#TPL-select-isEnabled'},
            {field: 'roleName', title: '担任角色', width: 130, hide: false, templet: '#TPL-select-roles'},
            {field: 'userId', title: '变更单位', width: 130, hide: false, templet: '#TPL-select-units'},
            {fixed: "right", title: "操作", align: "center", toolbar: "#TPL-defTable-tools", width: 180} 
          ]],
          parseData: function(res){
            return {
              "code": res.code,
              "msg": res.msg,
              "count": res.data.total,
              "data": res.data.list
            };
          },
          done: function(res, curr, count){
            
          }
      });

      var removeObj = function(tableObj, postData) {
        $.ajax({
          url: '/api/system/user/remove', type: 'POST', contentType: "application/json", data: JSON.stringify(postData),
          success: function(res){
            layer.closeAll();
            if(res.code === 200){
              layer.msg(res.msg, { icon: 1 });
              tableObj.del();
            } else {
              layer.alert(res.msg, { icon: 5});
            }
          },
          error: function(res, msg){layer.msg('error');}
        });
      }

      var addObj = function(postData){
        $.ajax({
          url: '/api/system/user/add', type: 'POST', contentType: "application/json", data: JSON.stringify(postData), success: function(res){
            layer.closeAll();
            if(res.code === 200){
              layer.msg(res.msg, { icon: 1 });
              defTable.reload();
            } else {
              layer.alert(res.msg, { icon: 5});
            }
          }
          ,error: function(res, msg){layer.msg('error');}
        });
      }
      var updateObj = function(postData){
        addObj(postData);
      }

      var updateUnitUserRole = function(unitId, userId, roleId) {
        var postData = {"unitId": parseInt(unitId), "userId": parseInt(userId), "roleId": parseInt(roleId)}
        $.ajax({
          url: '/api/system/unit/set_user_role', type: 'POST', contentType: "application/json", data: JSON.stringify(postData),
          success: function(res){
            layer.closeAll();
            if(res.code === 200){
              layer.msg(res.msg, { icon: 1 });
              defTable.reloadData();
            } else {
              layer.alert(res.msg, { icon: 5});
            }
          },
          error: function(res, msg){defTable.reloadData();layer.msg('error');}
        });
      }
      
      // table事件 - 表单元格
      table.on('tool('+ defTableId +')', function (obj) {
        var layEvent = obj.event;
        var trData = obj.data;
        
        if (layEvent === 'removeRow'){
          layer.confirm("真的删除 ["+trData.username+"]", {title: false}, function (index) {
            removeObj(obj, {"ids":[trData.userId],"unitId":dqUnitId});
            layer.close(index);
          });
        } else if (layEvent === 'updatePwd'){
          layer.prompt({title: 'NEXT_账户密码', formType: 0}, function(password_new, index){
            layer.close(index);
            var postData = { "userId": trData.userId, "password_new": password_new };
            addObj(postData);
          });
        }
      });
      // table 事件 - 表头工具栏
      table.on('toolbar('+defTableId+')', function (obj) {
        if (obj.event === 'addRow'){
          layer.prompt({title: '账户号码', formType: 0}, function(username, index){
            layer.close(index);
            layer.prompt({title: '账户密码', formType: 1}, function(password_new, index){
              layer.close(index);
              layer.prompt({title: '名字', formType: 0}, function(name, index){
                layer.close(index);
                var postData = { "name": name, "username": username, "password_new": password_new, "memo": " ", "unitId": dqUnitId };
                addObj(postData);
              });
            });
          });
        }
      });
      // table 事件 - 单元格编辑
      table.on('edit('+ defTableId +')', function(obj){
        var field = obj.field; // 得到字段
        var value = obj.value; // 得到修改后的值

        var postData = obj.data; // 得到所在行所有键值
        // 值的校验
        if(field === 'sort'){
          if(!Number(value) == false){
            postData['sort'] = Number(value)
            updateObj(postData);
          }
        } else if (value.length > 0){
          updateObj(postData);
        }
        // 编辑后续操作，如提交更新请求，以完成真实的数据更新
        
      });

      // select 事件 - 监听
      form.on('select(unit-select-filter)', function(data){
        var elem = data.elem; // 获得 select 原始 DOM 对象
        var value = data.value; // 获得被选中的值
        var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
        dqUnitId = value;
        defTable.reload({ where: { unitId: value } });
      });
      form.on('select(select-role)', function(obj){
        var userId = $(obj.elem).attr('userId');

        updateUnitUserRole(dqUnitId, userId, obj.value)
      });
      form.on('select(select-unit)', function(obj){
        var userId = $(obj.elem).attr('userId');
        var roleId = $(obj.elem).closest('tr').find('[data-field="roleName"] select').val();
        
        updateUnitUserRole(obj.value, userId, roleId);
      });
      form.on('select(select-nonLock)', function(obj){
        var userId = $(obj.elem).attr('userId');

        updateObj({'userId': userId, 'nonLock': obj.value});
      });
      form.on('select(select-nonExpired)', function(obj){
        var userId = $(obj.elem).attr('userId');

        updateObj({'userId': userId, 'nonExpired': obj.value});
      });
      form.on('select(select-isEnabled)', function(obj){
        var userId = $(obj.elem).attr('userId');

        updateObj({'userId': userId, 'isEnabled': obj.value});
      });
    })
  </script>
</body>
</html>